{{ header }}{{ column_left }}
<div id="content">
    <div class="page-header">
        <div class="container-fluid">
            <div class="pull-right">
                <button type="submit" form="form-review" data-toggle="tooltip" title="{{ button_save }}" class="btn btn-primary"><i class="fa fa-save"></i></button>
                <a href="{{ cancel }}" data-toggle="tooltip" title="{{ button_cancel }}" class="btn btn-default"><i class="fa fa-reply"></i></a></div>
            <h1>{{ heading_title }}</h1>
            <ul class="breadcrumb">
				{% for breadcrumb in breadcrumbs %}
                    <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
				{% endfor %}
            </ul>
        </div>
    </div>
    <div class="container-fluid"> {% if error_warning %}
            <div class="alert alert-danger alert-dismissible"><i class="fa fa-exclamation-circle"></i> {{ error_warning }}
                <button type="button" class="close" data-dismiss="alert">&times;</button>
            </div>
		{% endif %}
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title"><i class="fa fa-pencil"></i> {{ text_form }}</h3>
            </div>
            <div class="panel-body">
                <form action="{{ action }}" method="post" enctype="multipart/form-data" id="form-review" class="form-horizontal">
                    <div class="form-group required">
                        <label class="col-sm-2 control-label" for="input-author">{{ entry_author }}</label>
                        <div class="col-sm-10">
                            <input type="text" name="author" value="{{ author }}" placeholder="{{ entry_author }}" id="input-author" class="form-control"/>
							{% if error_author %}
                                <div class="text-danger">{{ error_author }}</div>
							{% endif %} </div>
                    </div>
                    <div class="form-group required">
                        <label class="col-sm-2 control-label" for="input-product"><span data-toggle="tooltip" title="{{ help_product }}">{{ entry_product }}</span></label>
                        <div class="col-sm-10">
                            <input type="text" name="product" value="{{ product }}" placeholder="{{ entry_product }}" id="input-product" class="form-control"/> <input type="hidden" name="product_id" value="{{ product_id }}"/>
							{% if error_product %}
                                <div class="text-danger">{{ error_product }}</div>
							{% endif %} </div>
                    </div>
                    <div class="form-group required">
                        <label class="col-sm-2 control-label" for="input-text">{{ entry_text }}</label>
                        <div class="col-sm-10">
                            <textarea name="text" cols="60" rows="8" placeholder="{{ entry_text }}" id="input-text" class="form-control">{{ text }}</textarea>
							{% if error_text %}
                                <div class="text-danger">{{ error_text }}</div>
							{% endif %} </div>
                    </div>
                    <div class="form-group required">
                        <label class="col-sm-2 control-label" for="input-name">{{ entry_rating }}</label>
                        <div class="col-sm-10">
                            <label class="radio-inline"> {% if rating == 1 %}
                                    <input type="radio" name="rating" value="1" checked="checked"/>
                                    1
								{% else %}
                                    <input type="radio" name="rating" value="1"/>
                                    1
								{% endif %} </label> <label class="radio-inline"> {% if rating == 2 %}
                                    <input type="radio" name="rating" value="2" checked="checked"/>
                                    2
								{% else %}
                                    <input type="radio" name="rating" value="2"/>
                                    2
								{% endif %} </label> <label class="radio-inline"> {% if rating == 3 %}
                                    <input type="radio" name="rating" value="3" checked="checked"/>
                                    3
								{% else %}
                                    <input type="radio" name="rating" value="3"/>
                                    3
								{% endif %} </label> <label class="radio-inline"> {% if rating == 4 %}
                                    <input type="radio" name="rating" value="4" checked="checked"/>
                                    4
								{% else %}
                                    <input type="radio" name="rating" value="4"/>
                                    4
								{% endif %} </label> <label class="radio-inline"> {% if rating == 5 %}
                                    <input type="radio" name="rating" value="5" checked="checked"/>
                                    5
								{% else %}
                                    <input type="radio" name="rating" value="5"/>
                                    5
								{% endif %} </label>
							{% if error_rating %}
                                <div class="text-danger">{{ error_rating }}</div>
							{% endif %} </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="input-date-added">{{ entry_date_added }}</label>
                        <div class="col-sm-3">
                            <div class="input-group datetime">
                                <input type="text" name="date_added" value="{{ date_added }}"
                                       placeholder="{{ entry_date_added }}" data-date-format="YYYY-MM-DD HH:mm:ss"
                                       id="input-date-added" class="form-control"/>
                                <div class="input-group-btn">
                                    <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>

					{# 评价图片 #}
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="input-image">{{ entry_review_image }}</label>
                        <div class="col-sm-10 review-image-block">
							{% for key,review_image in review_images %}
                                <div class="image-container" data-index="{{ key }}">
                                    <a href="" class="thumb-image img-thumbnail review-image" data-preview="true" data-toggle="image">
                                        <img src="{{ review_image['review_image_url'] }}" data-placeholder="{{ placeholder }}">
                                    </a>
                                    <input type="hidden" name="review_images[]" value="{{ review_image['review_image'] }}" class="input_image_{{ key }}">
                                </div>
							{% endfor %}
                            <div id="review_image_row">
                                <button type="button" data-toggle="tooltip" title="{{ button_image_add }}" class="btn btn-primary">
                                    <i class="fa fa-plus-circle"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="input-status">{{ entry_status }}</label>
                        <div class="col-sm-10">
                            <select name="status" id="input-status" class="form-control">
								{% if status %}
                                    <option value="1" selected="selected">{{ text_enabled }}</option>
                                    <option value="0">{{ text_disabled }}</option>
								{% else %}
                                    <option value="1">{{ text_enabled }}</option>
                                    <option value="0" selected="selected">{{ text_disabled }}</option>
								{% endif %}
                            </select>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 预览模态框（Modal） -->
<div class="order-info-modal modal fade modal-vertical-middle" id="photo-modal" tabindex="1">
	<div class="modal-dialog">
	</div><!-- /.modal -->
</div>
<script type="text/javascript"><!--
    $('.datetime').datetimepicker({
        language: '{{ datepicker }}',
        pickDate: true,
        pickTime: true
    });
    //--></script>
<script type="text/javascript"><!--
    $('input[name=\'product\']').autocomplete({
        'source': function(request, response) {
            $.ajax({
                url: 'index.php?route=catalog/product/autocomplete&user_token={{ user_token }}&filter_name=' + encodeURIComponent(request),
                dataType: 'json',
                success: function(json) {
                    response($.map(json, function(item) {
                        return {
                            label: item['name'],
                            value: item['product_id']
                        }
                    }));
                }
            });
        },
        'select': function(item) {
            $('input[name=\'product\']').val(item['label']);
            $('input[name=\'product_id\']').val(item['value']);
        }
    });
    //--></script>

// 上传图片
<script type="text/javascript"><!--
	$(function(){

        addEventListener();
        var current_index;
        var image_urls = [];

        initImageArray();

        /**
		 * 初始化图片存储数组*/
        function initImageArray() {
            image_urls = [];
            $('.image-container img').each(function(){
                var url_param = {
                    src: this.src,
					file_name: $(this).parents('.image-container').children('input').val()
				};
                image_urls.push(url_param);
			});
		}

	    /**
		 * 添加图片的方法
		 * */
        function addImage() {
            current_index = $('.review-image-block > div').length - 1;	// 初始按钮的div占了一个长度，因此需要减1
			var str = 	'<div class="image-container" data-index="' + current_index + '">' +
							'<a href="" class="thumb-image img-thumbnail review-image" data-preview="true" data-toggle="image">\n' +
							'<img src="{{ placeholder }}" data-placeholder="{{ placeholder }}">' + '</a>' +
						'<input type="hidden" name="review_images[]" value="" class="input_image_'+ current_index +'">' +
						'</div>';
            var image_tag = $(str);

            $('#review_image_row').before(image_tag);

            initImageArray();
        }

        /**
         * 给新增/关闭/查看大图按钮添加事件监听*/
        function addEventListener() {
            $('body').on('click','#review_image_row > button',addImage);
            $('body').on('click','#button-delete',function(e){
                var index = $(e.target).parents('.image-container').data('index');

                deleteImage(index);
            });
			$('.review-image-block').on('click','#button-preview',function(e){
			    var img_a_link = $(e.target).parents('.image-container').children('.review-image');
			    var img = img_a_link.children('img');

			    var img_href = img.attr('src');

                if (img_href){
                    previewImage(img_href);
                }

                img_a_link.popover('destroy');
			})
        }

        /**
         * 删除图片
         * @param index 需要删除的图片的index值*/
        function deleteImage(index) {
            image_urls.splice(index,1);

            $('div').remove('.review-image-block > .image-container');

            reRenderTag();
        }

        /**
         * 重新根据数组渲染生成新的dom*/
        function reRenderTag() {
            var tag_str = '';

            image_urls.forEach(function(url,index){
                tag_str += '<div class="image-container" data-index="' + index + '">' +
                    '<a href="" class="thumb-image img-thumbnail review-image" data-preview="true" data-toggle="image">\n' +
                    '<img src="' + url.src + '" data-placeholder="{{ placeholder }}">' + '</a>' +
                    '<input type="hidden" name="review_images[]" value="' + url.file_name + '" class="input_image_'+ index +'">' +
                    '</div>';
            });

            $('#review_image_row').before(tag_str);
        }

        /**
         * 预览图片图片
         * @param src
         */
        function previewImage(src) {
            var $photoModal =  $("#photo-modal");
            $photoModal.find(".modal-dialog").html('');
            $photoModal.find('.modal-dialog').append("<img class='preview-image' src=\""+src+"\">");
            $photoModal.modal('show');
        }
	})

    //--></script>
{{ footer }}